<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<script>
    $(function () {
        $("td").addClass("trer")
        // for(let i =0;i<td.length;i++){
        //     td[i].className="trer"
        // }

    })
</script>
<style>
    .tb{
        margin-top: 100px;
        text-align: center;
    }

    [rowspan]{
        line-height: 80px;
        height: 80px;
    }
    .trer:hover{
        background: red;
    }
</style>
<body>
<div class="container">
    <table class="table table-bordered tb">
        <!--第一行-->
        <tr>
            <td class="td-h">员工姓名</td>
            <td >张三</td>
            <td>出生年月</td>
            <td>19990908</td>
        </tr>
        <!--第二行-->
        <tr>
            <td>身份证号</td>
            <td colspan="3">340836199909081389</td>
            <!--<td></td>-->
            <!--<td></td>-->
        </tr>
        <!--第三行-->
        <tr>
            <td>联系电话</td>
            <td  colspan="3">19937786789</td>
            <!--<td></td>-->
            <!--<td></td>-->
        </tr>
        <!--第四行-->
        <tr class="tr">
            <td>绩效</td>
            <td>5000</td>
            <td rowspan="2">合计</td>
            <td rowspan="2">5500</td>
        </tr>
        <!--第五行-->
        <tr>
            <td>补助</td>
            <td>500</td>
            <!--<td ></td>-->
            <!--<td></td>-->
        </tr>
    </table>
</div>
</body>
</html>